import { Flex } from 'antd-mobile';
import React, { Component } from 'react';
import './css/banner.css';
import { getList } from '../../api';
import {BrowserRouter as Router,Link,Route,Redirect,Switch} from 'react-router-dom'
class Banner extends Component {
    constructor() {
        super()
        this.state = {
            arr: []

        }
    }
    componentDidMount() {
        getList().then(res => {
            this.setState({
                arr: res.data.result.splice(0, 6)
            })

        })

    }

    render() {
        console.log(this.state.arr)

        return (
            <div className='searchBanner'>
                <div className='searchBanner-two'>
                    <h2>新歌推荐</h2>
                    <h4>新歌广场</h4>
                </div>
                {this.state.arr.map((item, i) => {
                    return (
                        <Link to="/newSing">
                            <div key={i} >

                                <Flex className='searchBanner-one' >
                                    <Flex.Item >
                                        <img src={item.picUrl} alt="" />
                                        <span>{item.name}</span>
                                        <h5>❤{item.playCount}</h5>
                                    </Flex.Item>

                                </Flex>

                            </div>
                        </Link>
                    )
                })}


            </div>
        )
    }
}

export default Banner